<template>
  <div>
    <el-table :data="tableData5" style="width: 100%" :row-class-name="tableRowClassName">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="通知 ID">
              <span>{{ props.row.msgId }}</span>
            </el-form-item>
            <br />
            <el-form-item label="通知内容">
              <span>{{ props.row.msgMsg }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="通知时间">
        <template slot-scope="scope">{{scope.row.msgBeginDate|YMDHMSdate}}</template>
      </el-table-column>
      <el-table-column label="通知名称" prop="msgName"></el-table-column>
      <el-table-column label="通知描述" prop="msgMain"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="edit(scope.row.msgId)">查看</el-button>
          <el-button type="primary" @click="todelete(scope.row.msgId)">删除</el-button>

          <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确认删除报修项目吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteById(pro_id)">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 0 auto; 
    width:550px;
    border-width:5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1 , 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pro_id: "",
      centerDialogVisible: false,
      tableData5: [
        {
          msgId: "JH202004021859365",
          msgLevel: "1",
          msgName: "防疫通知",
          msgMain: "做好小区防疫措施",
          msgMsg:
            "针对传染病采取的预防、控制或消灭的对策和措施称为防疫措施。预防、控制和消灭传染病应讲究战略、战术。制订防疫措施时应遵循下列原则；(1)在各级党和政府领导下做好组织工作，这是防疫工作顺利进行的重要组织保证。(2)贯彻预防为主的方针。(3)充分发动群众、做好防疫工作。(4)讲究对策，采取综合性措施，并选择主导措施。(5)做好计划免疫和疾病监测工作。(6)坚持反复斗争的战略观点。",

          msgBeginDate: "2020/4/2"
        }
      ],
      page: {
        size: 10,
        current: 1,
        total: 5
      }
    };
  },

  methods: {
    todelete(index) {
      this.centerDialogVisible = true;
      this.pro_id = index;
      console.log(index)
    }, deleteById(row) {
      //进行删除操作，delete方法
      this.centerDialogVisible = false;
      this.axios
        .post("message/deletemessgae?msgId=" + row)
        .then(res => {
          console.log(res);
          if (res.data == "success") {
            this.$message({
              message: "已成功删除！！！",
              type: "warning"
            });
            window.location.reload();
          }
        })
        .catch(err => {
          console.error(err);
        });
      console.log(row);
    },
    edit(row) {
      this.$router.push({
        //传参用router，接参用route
        path: "/index_manager/updatamessage",
        query: {
          id: row
        }
      });
      console.log(row);
    },
    //分页
    handleSizeChange(val) {
      //分页的标记数，一页有多少数据。
      this.page.size = val;
      this.axios
        .post("message/messagepage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.tableData5 = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });

      console.log(`每页 ${val} 条`);
      console.log(val);
    },
    handleCurrentChange(val) {
      //当前是第几页
      this.page.current = val;
      this.axios
        .post("message/messagepage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.tableData5 = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`当前页: ${val}`);
      console.log(val);
    },

    // 选项标记颜色
    tableRowClassName({ row, rowIndex }) {
      if (row.msgLevel === "1") {
        return "warning-row";
      } else {
        return " ";
      }
    }
  },
  created() {
    this.axios
      .post("message/messagepage", this.page)
      .then(res => {
        this.page.total = res.data.total;
        this.page.size = res.data.size;
        this.page.current = res.data.current;
        this.tableData5 = res.data.records;
        console.log(res);
      })
      .catch(err => {
        console.error(err);
      });
  },
  components: {}
};
</script>

<style scope>
.el-table .warning-row {
  background: oldlace;
}

.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
</style>
